<template>
  <div>
    <van-row class="heads">
      <van-icon name="arrow-left" @click="back" class="back" />
      <span> 设置 </span>
    </van-row>
    <!-- 头像 -->
    <van-row class="imgt">
      <van-col offset="9">
        <van-uploader :after-read="afterRead">
          <van-image
            round
            width="100"
            height="100"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
        </van-uploader>
      </van-col>
    </van-row>

    <!-- 输入任意文本 -->
    <van-field v-model="text" label="昵称：" />
    <!-- 输入手机号，调起手机号键盘 -->
    <van-field v-model="tel" type="tel" label="手机号：" />
    <van-field v-model="uname" label="负责人姓名：" />
    <van-field v-model="sname" label="零售商店名：" />

    <van-button type="primary" size="large" class="save">保存</van-button>
  </div>
</template>

<script>
export default {
  name: "Fruith5Editmessge",

  data() {
    return {
      tel: "13658037504",
      text: "水果项目",
      uname: "张三",
      sname: "小店",
    };
  },

  mounted() {},

  methods: {
    back() {
      this.$router.go(-1);
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
  },
};
</script>

<style  scoped>
.back {
  cursor: pointer;
}
.heads {
  font-size: 18px;
  font-weight: bold;
  /* line-height: 2.375rem; */
  color: white;
  background-color: rgb(0, 255, 170);
  height: 2.375rem;
  padding: 0.9375rem 0.1875rem 0rem 0.625rem;
}
.imgt {
  margin-top: .625rem;
  margin-top: .625rem;
}
.save{
    position: absolute;
    bottom: 0;
}
</style>